<template>
  <div class="ipa-page">
    <div class="card">
      <h1 class="title">英美发音对比：talk</h1>
      <p class="subtitle">给定音标：US /tɔk/，UK /tɔːk/</p>

      <section class="section">
        <h2 class="section-title">如何根据音标发音</h2>
        <div class="grid">
          <div class="panel">
            <h3>
              美音 US /tɔk/
              <button class="icon-btn" title="播放美式发音" @click="play('us')">🔊</button>
            </h3>
            <ul class="steps">
              <li><b>/t/</b>：舌尖抵上齿龈，短促送气，类似“特”。</li>
              <li><b>/ɔ/</b>：张口，口型圆而稍大，舌位偏后，类似“哦”的短音。</li>
              <li><b>/k/</b>：舌后部抵软腭，爆破音，类似“克”。</li>
            </ul>
            <p class="tip">连起来：t + ɔ + k → 近似“托(短)克”。</p>
          </div>
          <div class="panel">
            <h3>
              英音 UK /tɔːk/
              <button class="icon-btn" title="播放英式发音" @click="play('uk')">🔊</button>
            </h3>
            <ul class="steps">
              <li><b>/t/</b>：同上。</li>
              <li><b>/ɔː/</b>：与美音的 /ɔ/ 类似，但<strong>更长</strong>，保持 1.5~2 倍时长。</li>
              <li><b>/k/</b>：同上。</li>
            </ul>
            <p class="tip">连起来：t + ɔː + k → 近似“托——克”（中间元音更长）。</p>
          </div>
        </div>
      </section>

      <section class="section">
        <h2 class="section-title">快速记忆</h2>
        <ul class="bullets">
          <li>看到 <b>ː</b>：表示<strong>长元音</strong>，时长拉长。</li>
          <li><b>/ɔ/</b> 与 <b>/ɔː/</b> 口型相似，区别在<strong>时长</strong>（英音更长）。</li>
          <li>尾音 <b>/k/</b> 爆破要明显，但词尾可轻微弱化，避免夸张。</li>
        </ul>
      </section>

      <section class="section">
        <h2 class="section-title">小练习</h2>
        <div class="practice">
          <button class="btn" @click="playGuide('us')">跟读 US /tɔk/（节拍提示）</button>
          <button class="btn" @click="playGuide('uk')">跟读 UK /tɔːk/（长音提示）</button>
        </div>
        <p class="note">说明：喇叭按钮使用浏览器语音合成朗读英文 <code>talk</code>（美式/英式），下方按钮用<strong>节拍</strong>模拟时长差异。</p>
      </section>
    </div>
  </div>
  
</template>

<script setup>
// 语音合成（美/英）与节拍辅助
let voices = []
const refreshVoices = () => {
  voices = window.speechSynthesis ? window.speechSynthesis.getVoices() : []
}
if (typeof window !== 'undefined' && window.speechSynthesis) {
  refreshVoices()
  window.speechSynthesis.onvoiceschanged = refreshVoices
}

const pickVoice = (type) => {
  if (!voices || voices.length === 0) return null
  // 优先挑选本地可用的目标口音
  if (type === 'us') {
    return (
      voices.find(v => /en[-_]?US/i.test(v.lang)) ||
      voices.find(v => /en[-_]?CA|en[-_]?PH/i.test(v.lang)) ||
      voices.find(v => /^en/i.test(v.lang)) ||
      voices[0]
    )
  }
  // uk
  return (
    voices.find(v => /en[-_]?GB/i.test(v.lang)) ||
    voices.find(v => /en[-_]?AU|en[-_]?NZ/i.test(v.lang)) ||
    voices.find(v => /^en/i.test(v.lang)) ||
    voices[0]
  )
}

const play = (type) => {
  try {
    if (!window.speechSynthesis) {
      alert('当前浏览器不支持语音合成，建议使用 Chrome/Edge 最新版。')
      return
    }
    const utt = new SpeechSynthesisUtterance('talk')
    const v = pickVoice(type)
    if (v) utt.voice = v
    // 语速与音高微调（英式长元音可降低语速）
    utt.rate = type === 'uk' ? 0.9 : 1.0
    utt.pitch = 1.0
    window.speechSynthesis.cancel()
    window.speechSynthesis.speak(utt)
  } catch (e) {
    // 静默失败
  }
}

// 仅用节拍模拟时长差异：US 短、UK 长
const playGuide = (type) => {
  // 使用 Web Audio API 生成简短节拍，提示时长节奏
  try {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
    const beep = (timeMs = 120) => {
      const o = audioCtx.createOscillator()
      const g = audioCtx.createGain()
      o.type = 'sine'
      o.frequency.setValueAtTime(660, audioCtx.currentTime)
      g.gain.setValueAtTime(0.0001, audioCtx.currentTime)
      g.gain.exponentialRampToValueAtTime(0.3, audioCtx.currentTime + 0.01)
      g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + timeMs / 1000)
      o.connect(g)
      g.connect(audioCtx.destination)
      o.start()
      o.stop(audioCtx.currentTime + timeMs / 1000)
    }

    // US: t(短) - ɔ(短) - k(短)
    if (type === 'us') {
      beep(90)   // t
      setTimeout(() => beep(140), 180) // ɔ（短）
      setTimeout(() => beep(90), 380) // k
    } else {
      // UK: t(短) - ɔː(长) - k(短)
      beep(90)    // t
      setTimeout(() => beep(300), 180) // ɔː（明显更长）
      setTimeout(() => beep(90), 560)  // k
    }
  } catch (e) {
    // 静默失败
  }
}
</script>

<style scoped>
.ipa-page {
  min-height: 100vh;
  background: #f7fafc;
  padding: 24px;
}

.card {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 28px;
}

.title {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #2d3748;
}

.subtitle {
  margin: 0 0 20px 0;
  color: #718096;
}

.section { margin-top: 20px; }
.section-title { font-size: 18px; margin: 0 0 12px 0; color: #2d3748; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel {
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 16px;
  background: #fafafa;
}

.icon-btn {
  margin-left: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.steps { margin: 0; padding-left: 18px; color: #4a5568; }
.steps li { line-height: 1.9; }
.tip { margin-top: 8px; color: #2b6cb0; }

.bullets { margin: 0; padding-left: 18px; color: #4a5568; }
.bullets li { line-height: 1.9; }

.practice { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  cursor: pointer;
}
.btn:hover { opacity: 0.92; }

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}
</style>


